<template>
	<view class="container">
		<navView navTitle="开票情况" titleColor="#fff" :isBack="true"></navView>
		<view class="content">
			<view class="data-statistics">
				<view class="title">
					<view class="tiao"></view>
					合同
				</view>
				<view class="title-state">
					<view class="tit">
						{{ detail.contract.name || '暂无合同名称' }}
					</view>
					<view class="state">
						{{ detail.invoice_status_text }}
					</view>
				</view>
				<view class="price">
					合同金额：<text>{{ detail.contract.total_price || 0}}元</text>
				</view>
			</view>
			<view class="data-statistics">
				<view class="title">
					<view class="tiao"></view>
					数据统计
				</view>
				<!-- 第一组数据 -->
				<view class="data-row">
					<view class="data-item">
						<text class="label">已付金额</text>
						<text class="value">{{ detail.payment_status.paid_amount }}</text>
					</view>
					<view class="data-item">
						<text class="label">未付金额</text>
						<text class="value">{{ detail.payment_status.unpaid_amount }}</text>
					</view>
					<view class="data-item">
						<text class="label">待付金额</text>
						<text class="value">{{ detail.payment_status.pending_payment }}</text>
					</view>
				</view>
				<!-- 第二组数据 -->
				<view class="data-row">
					<view class="data-item">
						<text class="label">已开票金额</text>
						<text class="value">{{ detail.invoice_status.invoiced_amount }}</text>
					</view>
					<view class="data-item">
						<text class="label">未开票金额</text>
						<text class="value">{{ detail.invoice_status.uninvoiced_amount }}</text>
					</view>
					<view class="data-item">
						<text class="label">待开票金额</text>
						<text class="value">{{ detail.invoice_status.pending_invoice }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<button class="btn1" @tap="$navTo('/subpkg/contract/priceList/priceList?id=' + detail.contract.id)">查看付款记录</button>
			<button class="btn2" @tap="applyInvoice()">发票申请</button>
			<button class="btn1" @tap="downloadInvoice()">下载发票</button>
		</view>

	</view>
</template>

<script>
	import download from '@/util/filesdownload.js';

	export default {
		data() {
			return {
				id: '',
				detail: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.$request('/addons/qingdong/contract/getInvoiceStatus', 'GET', {
					contract_id: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			applyInvoice(){
				if (this.detail.contract.pay_status == 0){
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '该合同暂无付款，不能申请发票',
						duration: 2000,
					});
				}else{
					console.log('111');
					uni.navigateTo({
						'url': '/subpkg/contract/contractForm/contractForm?id=' + this.id
					})
				}			
			},
			downloadInvoice() {
				if (this.detail.invoiceStatusNum != 0) {
					// 下载发票
					if (this.detail.invoice_files && this.detail.invoice_files.length > 0) {
						// 调用多文件下载方法
						download.downloadAllFiles(this.detail.invoice_files.map(f => f.url));
					} else {
						uni.showToast({
							icon: 'none',
							title: '该合同没有申请发票，不能下载发票',
							duration: 2000,
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '该合同没有申请发票，不能下载发票',
						duration: 2000,
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}

	.content {
		.data-statistics {
			background-color: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.tiao {
					width: 6rpx;
					height: 22rpx;
					background: #1B87E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 10rpx;
				}
			}

			.title-state {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				justify-content: space-between;

				.tit {
					font-size: 28rpx;
					color: #333333;
					line-height: 20rpx;
					font-weight: bold;
				}

				.state {
					width: 125rpx;
					height: 38rpx;
					line-height: 38rpx;
					text-align: center;
					color: #fff;
					background: #3374CC;
					border-radius: 0rpx 29rpx 0rpx 29rpx;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFFFFF;
				}

				.state2 {
					width: 125rpx;
					height: 38rpx;
					line-height: 38rpx;
					text-align: center;
					color: #fff;
					background: #33CC99;
					border-radius: 0rpx 29rpx 0rpx 29rpx;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}

			.price {
				font-weight: 400;
				font-size: 22rpx;
				color: #7D7D7D;

				text {
					color: #333333;
				}
			}

			.data-row {
				display: flex;
				justify-content: space-around;
				margin-top: 20rpx;

				.data-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.label {
						font-size: 28rpx;
						color: #666666;
					}

					.value {
						font-size: 32rpx;
						margin-top: 10rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.btns {
		width: 100vw;
		position: fixed;
		bottom: 30rpx;
		left: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.btn1 {
			width: 100%;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 84rpx 84rpx 84rpx 84rpx;
			border: 2rpx solid #008EFF;
			font-weight: 400;
			font-size: 30rpx;
			color: #008EFF;
			line-height: 84rpx;
			margin-top: 20rpx;
		}

		.btn2 {
			width: 100%;
			height: 84rpx;
			background: #008EFF;
			border-radius: 84rpx 84rpx 84rpx 84rpx;
			border: 2rpx solid #008EFF;
			color: #fff;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 84rpx;
			margin-top: 20rpx;
		}
	}
</style>